<template>
	<view class="">

		<u-navbar leftIcon=" " bgColor="rgba(0,0,0,0)">
			<view class="home_header" slot="center">
				<view class="header_info">
					<navigator url="/pages/homepage/homepage" hover-class="none">
						<image class="ph" :src="anchorInfo.avatar" mode="aspectFill"></image>
					</navigator>
					<navigator v-if="anchorInfo.first_name" class="name" url="/pages/homepage/homepage" hover-class="none" :style="{'max-width': maxWidth + 'rpx' }">
						{{anchorInfo.first_name}}
					</navigator>
					<view v-if="!isOneself">
						<view v-if="isLike" class="btn hover" @click="clickLike(anchorInfo.user_id)">
							已关注
						</view>
						<view v-else class="btn" @click="clickLike(anchorInfo.user_id)">
							关注
						</view>
					</view>
				</view>
				<view class="header_more" @click="showPopup = true">

					<u-icon name="grid-fill" color="#fff" size="40rpx"></u-icon>
				</view>
				<view class="header_my"  @click="clickGoToMy">
					<u-icon name="account-fill" color="#fff" size="40rpx"></u-icon>
					<!-- <image class="ico_2" src="../../static/img/ico_2.png" mode="widthFix"></image> -->
				</view>
			</view>
		</u-navbar>
		
		<view class="home_video">
			
			<video class="video_item" :src="liveVideos[liveVideoIndex].video_url"
				:enable-progress-gesture="false"  
				object-fit="cover" 
				:controls="false" 
				:show-center-play-btn="false" 
				:autoplay="true" 
				:loop="true"
				:muted="isVoice == 1"
				:poster="liveVideos[liveVideoIndex].video_img"
				:poster-for-crawler="liveVideos[liveVideoIndex].video_img"
				@ended="videoEnded"
				@play="videoPlay"
			>
				<view v-if="isCoverPh" class="video_ph">
					<image v-if="liveVideos[liveVideoIndex].video_img" class="img" :src="liveVideos[liveVideoIndex].video_img" mode="aspectFill"></image>
					<image v-else class="img" :src="liveVideos[liveVideoIndex].video_url+'?x-oss-process=video/snapshot,t_7,f_jpg,w_720,h_1280,m_fast,ar_auto'" mode="aspectFill"></image>
				</view>
			</video>
			
		</view>
		
		
		<view class="text-box">
			<!-- 欢迎语 -->
			<view  class="welcome_box">
				<view class="welcome_ques" v-if="welcome">
				<text>问:</text>
				{{welcome}}
				</view>
			</view>
			
			<view  class="store_item" v-for="(item,index) in liveGoods" v-if="item.live_video_id == play_video_id">
				<store-product :appid="item.appid" :product-id="item.product_id" custom-content="true">
				<view class="store_ques" >
					<text>商品 ｜ </text>{{item.product_name}}
				</view>
				</store-product>
			</view>
			
			
			
			<view class="subtitle_ques" v-if="liveSubTitle">
				<text>简介:</text>
				{{liveSubTitle}}
			</view>
		</view>

		<view class="intellect" >
			<view class="title" style="display: none;">
				<view class="name">
					<view class="text">
						智能推荐
					</view>
					<image class="ico_3" src="../../static/img/ico_3.png" mode="widthFix"></image>
				</view>
				<view class="btn" @click="showKeyboard">
					<image class="ico_4" src="../../static/img/ico_4.png" mode="widthFix"></image>
					<view class="text">
						文字
					</view>
				</view>
				<view class="btn" @click="clickIsVoice(1)">
					<image class="ico_5" src="../../static/img/ico_5.png" mode="widthFix"></image>
					<view class="text">
						语音
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in liveWords" :class="liveWordIndex == index?'hover':''" @click="clickliveWords(item, index)" :key="index" v-if="item.status != 1">
					{{item.title}} <image class="ico_lock"  v-if="item.status == 2 && is_lock" src="../../static/img/lock_btn.png" mode="widthFix"></image><image class="ico_lock"  v-if="item.status == 2 && !is_lock" src="../../static/img/unlock_btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 聊天记录 -->
		<view class="chatting" v-if="isVoice == 1&&chattingData.length !=0">
			<scroll-view :scroll-top="scrollTop"  :scroll-with-animation="true" scroll-y="true" class="scroll-Y">
				<view class="item" v-for="(item,index) in chattingData" :key="index" :class="item.type == 0?'row_reverse':''">
					<image class="ph" :src="item.head" mode="aspectFill"></image>
					<view v-if="item.type == 0" class="text-right">
						{{item.content}}
					</view>
					<view v-if="item.type == 1" class="text-left">
						<text>{{item.name}}：</text>{{item.content}}<text v-if="item.content == '思考中'" class="three-dots"></text>
					</view>
				</view>
			</scroll-view>
			<image class="bg_img" src="../../static/img/bg_3.png" mode="widthFix"></image>
		</view>
		
		<!-- 键盘输入 -->
		<view class="keyboard" v-if="focusKey" :style="{ 'bottom': keyboardInfo.height + 'px' }">
			<u-icon @click="isVoice = 1" name="volume" color="#ccc" size="40rpx"></u-icon>
			<input class="key_input" v-model="keyText" :adjust-position="false" :focus="focusKey" confirm-type="send"
				@blur="blurKey" 
				@confirm="confirmKey"
				@keyboardheightchange="keyboardheightchange"
			/>
		</view>
		
		<!-- 语音输入 -->
		<view class="voice" >
			
			<view class="btn_big" :class="isVoiceClass?'hover':''" @touchstart="voiceStart"
				@touchmove.stop.prevent="voiceMove" @touchcancel="voiceCancel" @touchend="voiceEnd">
				<image class="ico_13" src="../../static/img/ico_13.png" mode="widthFix"></image>
				<view class="text">
					{{voiceText}}
				</view>
			</view>
			<!-- 提示 -->
			<view v-if="isVoiceClass" class="upglide_tip">
				<text>{{voiceTips}}</text>
				<!-- <image class="ico" src="../../static/img/ico_sound_line.png" mode="widthFix"></image> -->
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 7" :key="index"></view>
				</view>
			</view>
			
			<view class="btn-right" @click="showKeyboard">
				<image class="ico_14" src="../../static/img/ico_14.png" mode="widthFix"></image>
			</view>
			
			<view class="btn-top-right" @click="mutedchange()" v-if="isVoice == 0 || chattingData.length ==0">
				
				<image class="ico_vioce" v-if="isVoice" src="../../static/img/voice_mute.png"  mode="widthFix"></image>
				<image class="ico_vioce" v-else src="../../static/img/voice_unmute.png"  mode="widthFix"></image>
			</view>
		</view>

		<!-- 右侧弹出框 -->
		<u-popup :show="showPopup" mode="right" :safeAreaInsetTop="true" bgColor="#000" overlayOpacity="0.9" @close="closePopup" @open="openPopup">
			<view class="more_scene">
				<view class="search">
					<image class="ico_ss" src="../../static/img/ico_ss.png" mode="widthFix"></image>
					<input class="input_ss" v-model="liveName" type="text" placeholder="请输入推氪号或场景关键词" @confirm="getRecommendLivesList" />
					<button class="btn" @click="getRecommendLivesList">查找</button>
				</view>
				<view class="title">
					推荐场景
				</view>
				<u-empty v-if="aigcRecommendLives.length == 0" mode="search" marginTop="200rpx" icon="/static/img/ico_none.png" ></u-empty>
				<view v-else class="list">
					<view class="item" v-for="(item,index) in aigcRecommendLives" @click="clickRecommendLive(item.id)" :key="index">
						<image class="ph" :src="item.file" mode="aspectFill"></image>
						<view class="info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tag">
								{{item.sub_title}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		
		<!-- 提醒/弹出框 -->
		<u-popup :show="showExpend" mode="center" round="10" :safeAreaInsetBottom="false"  bgColor="#484848" overlayOpacity="0.7" @close="closeExpend">
			<view class="expend">
				<view class="num">
					<image class="ico" src="../../static/img/lock_big.png" mode="widthFix"></image>
				</view>
				<view class="title">
					分享后即可查看
					
				</view>
				<view class="text">
					分享给好友或群聊，分享可解锁此场景全部内容，解锁后永久有效
				</view>
				
				<view class="btn">

					<button class="btn_item hover" open-type="share">
						立即分享，分享后即可解锁
					</button>
				</view>
			</view>
		</u-popup>
		

	</view>
</template>

<script>
	// 录音
	//const recorderManager = uni.getRecorderManager();
	// 语音回答
	const innerAudioContext = uni.createInnerAudioContext();

	export default {
		data() {
			return {
				isFocus: false,
				isVoice: 0,
				showExpend:false,
				keyInput: null,
				showPopup: false,
				keyText: '',
				focusKey: false,
				voicePath: '',
				willStop: false,
				voiceText: '按住 说话',
				isVoiceClass: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				voiceTips: '手指上滑取消发送',
				keyboardInfo:{},
				
				liveName: '',
				aigcRecommendLives:[],
				liveId:'',
				isPrivate:0,
				liveSubTitle:'',
				liveFile:'',
				token: '',
				userId: 0,
				
				oldLiveVideos: [],
				bgLiveVideos: [],
				simulateLiveVideos: [],
				liveVideos: [],
				liveVideoIndex: 0,
				
				liveWords: [],
				liveWordIndex: null,
				videoUrl:'',
				videoImg:'',
				userInfo:{},
				anchorInfo: {},
				isLogin: false,
				anchorId:'',
				commonLiveId: '',
				chattingData: [],
				isLike: false,
				welcome:'',
				isOneself: false,
				maxWidth: 200,
				timeoutId: null,
				historys: [],
				
				plugin: null,
				managerWechat: null,
				
				scrollTop: 10000,
				old: {
					scrollTop: 0
				},
				
				videoListData: [],
				isCoverPh: true,
				aiName: '',
				aiAvatar: '',
				muted: false,
				isWordsPlay: false,
				shareInfo:{},
				can_watch: true,
				can_share: true,
				is_lock:true,
				touchStartTime: 0,
				liveGoods:[],
				play_video_id:0,
			}
		},
		onLoad(opt) {
			const that = this
			// 微信同声传译
			/*#ifdef MP-WEIXIN*/
			that.plugin = requirePlugin("WechatSI")
			that.managerWechat = that.plugin.getRecordRecognitionManager()
			//识别语音 -- 初始化
			// 有新的识别内容返回，则会调用此事件
			that.managerWechat.onRecognize = function(res) {
				console.log('有新的识别内容返回---',res)
			}
			// 正常开始录音识别时会调用此事件
			that.managerWechat.onStart = function(res) {
				console.log("成功开始识别---", res)
				innerAudioContext.stop()
			}
			// 识别错误事件
			that.managerWechat.onError = function(res) {
				//console.error("错误error msg", res)
				that.managerWechat = null
				that.managerWechat = that.plugin.getRecordRecognitionManager()
			}
			//识别结束事件
			that.managerWechat.onStop = function(res) {
				console.log('识别结束-------',res)
				//console.log(res);
				//console.log('录音临时文件地址 -->' + res.tempFilePath);
				//console.log('录音总时长 -->' + res.duration + 'ms');
				//console.log('文件大小 --> ' + res.fileSize + 'B');
				console.log('语音内容 --> ' + res.result);
				if (res.result == '') {
					//that.playTextToVoice('我没有听清楚，请重新说一遍！')
					uni.showToast({
						title: '我没有听清楚，请重新说一遍',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				that.chattingData.push({
					type: 0, //0问。1答
					head: that.userInfo.avatar,
					name: that.userInfo.first_name,
					content: res.result,
					url: ''
				})
				that.scrollTop = 25000
				that.getAiChat(res.result)
				that.isVoice = 1
			}
			/*#endif*/
			
			// 音频播放监听
			innerAudioContext.onEnded(() => {
				console.log('音频播放监听结束');
				//this.muted = false
				that.endSimulateVideo()
			});
			
			
			if(uni.getStorageSync('isLogin')){
				//this.token = uni.getStorageSync('token')
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				this.userId = uni.getStorageSync('userId');
				this.isLogin = uni.getStorageSync('isLogin')
				console.log('userInfo-----',this.userInfo)
			}
			else{
				console.log('未登录-----')
				
			}
			
			if(opt.liveId){
				console.log('liveId-----', opt.liveId)
				console.log('isPrivate-----', opt.isPrivate)
				this.liveId = opt.liveId
				if(opt.isPrivate){
					this.isPrivate = opt.isPrivate
				}
				this.liveFile = '';
				this.liveSubTitle = '';
				this.getAigcLiveVideos()
				this.getAigcLiveWords()
				this.speedViewAdd({live_id:this.liveId})
				this.getLivesConfigInfo()
				
				//console.log('this.liveId-----',this.liveId)
			}
			else{
				let live_secnce = false;
				const scene = decodeURIComponent(opt.scene); //miniprogram_F000F
				if(scene!="undefined"&&scene.length>15){
					let from_id = scene.substring(12);
					//miniprogram_F0006#liveId=984
					let params = from_id.split('#');
					if(params.length > 1){
						from_id = params[0]
						console.log('fromid222',from_id)
						uni.setStorageSync("fromid", from_id);
						let  live_param = params[1]
						let live_param_arr = live_param.split('=');
						if(live_param_arr.length > 1){
							live_secnce = true;
							this.liveId = live_param_arr[1]
							console.log('liveId222',this.liveId)
							this.liveFile = '';
							this.liveSubTitle = '';
							this.getAigcLiveVideos()
							this.getAigcLiveWords()
							this.speedViewAdd({live_id:this.liveId})
							this.getLivesConfigInfo()
						}
						
					}else{
						console.log('fromid',from_id)
						uni.setStorageSync("fromid", from_id);
					}
					
						
					
				}
				if(!live_secnce){
					this.getAigcRecommendLivesList()
				}
				
			}
			
			if(opt.fromid){
				console.log('fromid',opt.fromid)
				uni.setStorageSync("fromid", opt.fromid);
			}
			
			
			
			this.getRecommendLivesList()
			
		},
		onShow() {
			this.getIsFollow()
			this.getLiveShareInfo()
		},
		
		onShareTimeline() {
			let that = this
			if(!that.liveFile){
				that.liveFile = that.videoImg 
			}
		    return {
				title: that.shareInfo.share_title, // 自定义朋友圈分享标题
				query: 'liveId=' + that.liveId +'&fromid='+that.userInfo.invite_code+'&isPrivate='+that.isPrivate, // 分享页面的参数（会拼接到路径后）
				imageUrl:  that.liveFile,// 自定义分享图片
		    };
		},
		onShareAppMessage(option) {
			if (option.from === 'button') {// 来自页面内分享按钮
				console.log(option.from)
			}
			let that = this
			if(!that.liveFile){
				that.liveFile = that.videoImg 
			}
			that.showExpend = false;
			that.speedShareAdd({live_id:that.liveId})
		    return {
		      title: that.shareInfo.share_title, // 分享的标题
			  imageUrl:  that.liveFile,
		      path: '/pages/index/index?liveId=' + that.liveId +'&fromid='+that.userInfo.invite_code+'&isPrivate='+that.isPrivate, // 分享页面路径，可以带参数
		      success: (res) => {
				console.log('分享成功2-----')
				
		        uni.showToast({
		          title: '分享成功',
		          icon: 'success'
		        });
		      },
		      fail: (res) => {
		        uni.showToast({
		          title: '分享失败',
		          icon: 'none'
		        });
		      }
		    };
		},
		
		methods: {
			closeExpend() {
			  this.showExpend = false
			  // console.log('close');
			},
			// 获取互动扩展信息
			getLivesConfigInfo(){
				this.getLiveGoodsInfo()
				if(!this.isLogin){
					return
				}
				uni.$u.http.get('/api/aigc_lives_config/'+this.userId +'?from=miniprogram&live_id='+this.liveId).then(res => {
					console.log('获取互动扩展信息-----',res.data.data)
					
					this.aiName = res.data.data.nickname
					this.aiAvatar = res.data.data.avatar
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 获取分享信息
			getLiveShareInfo(){
				if(!this.isLogin){
					return
				}
				uni.$u.http.get('/api/speed_share_list/'+this.userId +'?from=miniprogram&live_id='+this.liveId).then(res => {
					console.log('获取分享信息-----',res.data.data)
					if(res.data.data.length > 0){
						this.is_lock = false;
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 获取商品信息
			getLiveGoodsInfo(){
				console.log('获取商品信息加载')
				if(!this.liveId){
					return 
				}
				uni.$u.http.get('/api/speed_live_goods/'+this.userId +'?from=miniprogram&live_id='+this.liveId).then(res => {
					console.log('获取商品信息-----',res.data.data)
					if(res.data.data.length > 0){
						this.liveGoods = res.data.data;
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 点击推荐场景
			clickRecommendLive(id){
				
				innerAudioContext.stop();
				this.chattingData = []
				// this.liveVideoIndex = 0
				// this.liveWordIndex = null
				// this.liveVideos = []
				this.historys = []
				this.liveId = id
				this.getAigcLiveVideos()
				this.getAigcLiveWords()
				this.speedViewAdd({live_id:this.liveId})
				this.getLivesConfigInfo()
				setTimeout(() => {
					this.showPopup = false
				}, 500);
			},
				
			mutedchange() {
				console.log('voice'+this.isVoice)
				if(this.isVoice == 1){
					this.isVoice = 0;
				}else{
					this.isVoice = 1;
				}
			},
			// 视频开始播放
			videoPlay(){
				if(this.liveVideos){
					this.play_video_id =  this.liveVideos[this.liveVideoIndex].id;
					console.log(this.play_video_id)	
				}
				setTimeout(() => {
					this.isCoverPh = false
				}, 300);
			},
			// 视频播放完
			videoEnded(){
				//console.log('视频播放完-----',this.isWordsPlay)
				console.log('视频播放完liveVideos-----',this.liveVideos)
				//console.log('视频播放完oldLiveVideos-----',this.oldLiveVideos)
				if(this.isWordsPlay){
					this.liveVideos = this.oldLiveVideos
					this.liveVideoIndex = 0
					this.isWordsPlay = false
					return
				}
				if(this.liveVideos[this.liveVideoIndex].category == 1){
					this.liveVideos.splice(this.liveVideoIndex, 1);
				}
				if (this.liveVideos.length > this.liveVideoIndex+1) {
					this.liveVideoIndex++
				}
				else{
					this.liveVideoIndex = 0
				}
			},
			// 点击词条
			clickliveWords(item,index){
				console.log(item)
				if(item.status == 2 && this.is_lock){
					this.showExpend = true;
					return 
				}
				
				this.clickIsVoice(0)
				if(!this.isWordsPlay){
					this.oldLiveVideos = this.liveVideos
				}
				clearTimeout(this.timeoutId);
				this.isWordsPlay = true
				this.liveVideos = []
				this.liveVideoIndex = 0
				this.$nextTick(() => {
					this.liveVideos.push(item)
				});
				this.welcome = item.title,
				this.liveWordIndex = index
				this.timeoutId = setTimeout(() => {
					this.welcome = ''
				}, 2000);
			},
			// 增加观看
			speedViewAdd(postData){
				if(this.isOneself)
				{
					return
				}
				if(!this.isLogin)
				{
					return
				}
				uni.$u.http.post('/api/speed_view_add/'+this.userId +'?from=miniprogram', postData).then(res => {
					console.log('增加观看-----',res.data)
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 增加分享
			speedShareAdd(postData){
				if(this.isOneself)
				{
					return
				}
				if(!this.isLogin)
				{
					return
				}
				uni.$u.http.post('/api/speed_share_add/'+this.userId +'?from=miniprogram', postData).then(res => {
					console.log('分享成功-----',res.data)
					this.is_lock = false;
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 点击/取消添加关注
			clickLike(id){
				if(!this.isLogin){
					uni.reLaunch({
						url: "/pages/login/login?liveId="+ this.liveId
					})
					return
				}
				if(this.isLike)
				{
					uni.$u.http.post('api/speed_follow_cancel/'+this.userId, {follow_id: id} ).then(res => {
						console.log('取消关注-----',res.data)
						this.getIsFollow()
					}).catch(err => {
						console.log(err)
					})
				}
				else{
					uni.$u.http.post('api/speed_follow_add/'+this.userId, {follow_id: id} ).then(res => {
						console.log('添加关注-----',res.data)
						this.getIsFollow()
					}).catch(err => {
						console.log(err)
					})
				}
			},
			// 判断是否已关注
			getIsFollow(){
				if(!this.isLogin){
					return 
				}
				//console.log(this.userId, this.anchorInfo.user_id)
				if(this.userId == this.anchorInfo.user_id){
					this.isOneself = true;
					this.is_lock = false;
					this.maxWidth =  200;
					
				}
				else{
					this.isOneself = false;
					this.maxWidth =  140;
					uni.$u.http.get('/api/speed_my_follow_list/'+this.userId +'?follow_id='+this.anchorInfo.user_id+'&from=miniprogram').then(res => {
						//console.log('判断是否已关注-----',res.data)
						if(!res.data.data){
							//console.log('没关注-----')
							this.isLike = false
						}
						else{
							//console.log('已关注-----')
							this.isLike = true
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			// 登录后
			// 问答智能回复
			getAiChat(keyText){
				// uni.showLoading({
				// 	title: '思考中'
				// });
				const timestamp = Date.now();
				let postData = {
					type: 1, //0问。1答
					head: this.anchorInfo.avatar,
					name: this.anchorInfo.first_name,
					accessid: timestamp,
					content: '思考中',
					url: ''
				}
				if(this.aiName){
					postData.name = this.aiName
				}
				if(this.aiAvatar){
					postData.head = this.aiAvatar
				}
				this.chattingData.push(postData)
				console.log('1-----',this.chattingData)
				uni.$u.http.post('api/aigc_chat/'+this.userId+'?from=miniprogram', {
						live_id: this.liveId, 
						content: keyText, 
						accessid: timestamp,
						history: JSON.stringify(this.historys)
					}).then(res => {
					console.log('问答智能回复-----',res.data)
					//uni.hideLoading();
					for (let i in this.chattingData) {
						if(res.data.data.accessid == this.chattingData[i].accessid)
						{
							this.chattingData[i].content = res.data.data.content
						}
					}
					//this.chattingData[this.chattingData.length-1].content = res.data.data.content
					this.scrollTop = 30000
					//this.chattingData[this.chattingData.length-1].url = res.data.data.data.url
					// 播放回答音频
					innerAudioContext.src = res.data.data.data.url;
					innerAudioContext.play();
					this.startSimulateVideo();
					
					this.historys = []
					for (let i in this.chattingData) {
						//console.log('问答智能回复-----',i, this.chattingData)
						if(this.chattingData[i].type == 0)
						{
							this.historys.push({
								role: "user",
								content: this.chattingData[i].content
							})
						}
						else{
							this.historys.push({
								role: "assistant",
								content: this.chattingData[i].content
							})
						}
					}
					
					console.log(this.chattingData)
				}).catch(err => {
					console.log(err)
				})
			},
			//场景信息检测
			getAigcLiveInfo(){
				let user_id = 0;
				if(this.isPrivate  == 0){
					user_id = this.anchorId;
				}else{
					if(!this.userId){
						uni.reLaunch({
							url: "/pages/login/login?liveId="+ this.liveId
						})
						return
					}
					user_id = this.userId;
				}
				
				uni.$u.http.get('/api/aigc_live_check/'+user_id+'?from=miniprogram&id='+this.liveId).then(res => {
					console.log('场景信息检测-----',res.data.data)
					if(res.data.data.length > 0){
						this.liveId = res.data.data[0].id
						this.liveSubTitle = res.data.data[0].sub_title
						this.liveFile = res.data.data[0].file
						this.isPrivate = res.data.data[0].is_private
						this.can_share = res.data.data[0].share
						this.can_watch = res.data.data[0].watch
						if(res.data.data[0].share_info){
							this.shareInfo = res.data.data[0].share_info
						}
						console.log('can_watch_', this.can_watch)
						console.log('isPrivate_', this.isPrivate)
						if(!this.can_watch){
							//没有查看权限的直接跳转
							this.getAigcRecommendLivesList()
							uni.showToast({
								title: '暂无访问权限',
								duration: 2000,
								icon:'none'
							});
							
							
						}
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 我的互动场景
			getMyAigcLivesList(){
				uni.$u.http.get('/api/aigc_lives_list/'+this.userId +'?from=miniprogram&is_private=0').then(res => {
					console.log('我的互动场景-----',res.data.data)
					if(res.data.data.length == 0){
						this.liveId = this.commonLiveId
						this.getAigcLiveVideos()
						this.getAigcLiveWords()
					}
					else{
						this.liveId = res.data.data[0].id
						this.getMyAigcLivesVideos()
						this.getMyAigcLivesWords()
					}
					this.getLivesConfigInfo()
				}).catch(err => {
					console.log(err)
				})
			},
			// 场景列表
			getMyAigcLivesVideos(){
				uni.$u.http.get('/api/aigc_live_videos/'+this.userId +'?from=miniprogram&live_id='+this.liveId+'&type='+0+'&video_url=1').then(res => {
					console.log('场景-----',res.data)
					this.oldLiveVideos = []
					this.bgLiveVideos = []
					this.simulateLiveVideos = []
					this.liveVideos = []
					this.liveVideoIndex = 0
					this.liveWordIndex = null
					this.isWordsPlay = false
					//this.liveVideos = res.data.data
					const linshiData = []
					const resData = res.data.data
					for (let i in resData) {
						if(resData[i].category == 1){
							linshiData.unshift(resData[i])
						}
						else if(resData[i].category == 0){
							linshiData.push(resData[i])
							this.bgLiveVideos.push(resData[i])
						}else if(resData[i].category == 2){ //静默嘴形模仿
							this.simulateLiveVideos.push(resData[i])
						}
					}
					this.liveVideos = linshiData
					// console.log('liveVideos------', this.liveVideos)
					
					this.videoUrl = this.liveVideos[0].video_url
					this.videoImg = this.liveVideos[0].video_img
					this.anchorId = this.liveVideos[0].user_id
					this.getAigcOtherUserInfo()
					this.getAigcLiveInfo()
					
				}).catch(err => {
					console.log(err)
				})
			},
			// 词条列表
			getMyAigcLivesWords(){
				uni.$u.http.get('/api/aigc_live_videos/'+this.userId +'?from=miniprogram&live_id='+this.liveId+'&type='+1+'&video_url=1').then(res => {
					console.log('词条-----',res.data)
					this.liveWords = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 登录后
			
			// 获取主播个人信息
			getAigcOtherUserInfo(){
				uni.$u.http.get('/api/aigc_other_user_info/?user_id='+this.anchorId+'&from=miniprogram').then(res => {
					//console.log('获取主播个人信息-----',res.data)
					this.anchorInfo = res.data.data
					uni.setStorageSync("anchorInfo", JSON.stringify(res.data.data));
					this.getIsFollow()
				}).catch(err => {
					console.log(err)
				})
			},
			// 用户场景视频
			getAigcLiveVideos(){
				uni.$u.http.get('/api/aigc_other_live_videos/?from=miniprogram&live_id='+this.liveId+'&type='+0).then(res => {
					console.log('-----',res.data.data)
					this.oldLiveVideos = []
					this.bgLiveVideos = []
					this.simulateLiveVideos = []
					this.liveVideos = []
					this.liveVideoIndex = 0
					this.liveWordIndex = null
					this.isWordsPlay = false
					//this.liveVideos = res.data.data
					const linshiData = []
					const resData = res.data.data
					for (let i in resData) {
						if(resData[i].category == 1){ //问候
							linshiData.unshift(resData[i])
						}
						else if(resData[i].category == 0){ //静默
							linshiData.push(resData[i])
							this.bgLiveVideos.push(resData[i])
						}else if(resData[i].category == 2){ //静默嘴形模仿
							this.simulateLiveVideos.push(resData[i])
						}
					}
					this.liveVideos = linshiData
					//console.log('liveVideos------', this.liveVideos)
					this.videoUrl = this.liveVideos[0].video_url
					this.videoImg = this.liveVideos[0].video_img
					this.anchorId = this.liveVideos[0].user_id
					
					this.getAigcOtherUserInfo()
					this.getAigcLiveInfo()
				}).catch(err => {
					console.log(err)
				})
			},
			// 用户场景词条列表
			getAigcLiveWords(){
				uni.$u.http.get('/api/aigc_other_live_videos/?from=miniprogram&live_id='+this.liveId+'&type='+1).then(res => {
					console.log('未登录用户词条列表-----',res.data.data)
					this.liveWords = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 公共场景
			getAigcRecommendLivesList(){
				uni.$u.http.get('/api/aigc_recommend_lives_list?from=miniprogram&search='+this.liveName).then(res => {
					console.log('公共场景-----',res.data)
					this.commonLiveId = res.data.data[0].id
					
					if(this.isLogin){
						
						this.getMyAigcLivesList()
						this.getIsFollow()
						this.getLivesConfigInfo()
					}
					else{
						this.liveId = res.data.data[0].id
						this.getAigcLiveVideos()
						this.getAigcLiveWords()
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 推荐场景
			getRecommendLivesList(){
				uni.$u.http.get('/api/aigc_recommend_lives_list?from=miniprogram&search='+this.liveName).then(res => {
					//console.log('推荐场景-----',res.data)
					this.aigcRecommendLives = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			
			
			voiceStart(e) {
				this.clickIsVoice(1)
				//this.muted = true
				innerAudioContext.stop();
				this.endSimulateVideo();
				console.log('开始录音');
				//this.isVoice = 2
				this.voiceText = '松开 发送'
				this.isVoiceClass = true
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				// 语音开始识别
				//manager.start({duration:30000, lang: "zh_CN"})
				this.managerWechat.start()
			},
			voiceEnd() {
				console.log('录音结束');
				//this.isVoice = 1
				this.voiceText = '按住 说话'
				this.isVoiceClass = false
				this.voiceTips = '手指上滑取消发送'
				// 语音结束识别
				this.managerWechat.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			// 录音被打断
			voiceCancel() {
				// this.willStop = true;//不发送录音
				console.log('录音被打断');
				this.voiceText = '按住 说话'
				this.isVoiceClass = false
				this.voiceTips = '手指上滑取消发送'
				// 语音结束识别
				this.managerWechat.stop();
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceMove(e) {
				let touche = e.touches[0];
				//console.log('initPoint---', this.initPoint.Y);
				//console.log('clientY-----', touche.clientY);
				//判断上滑取消发送
				if (this.initPoint.Y - touche.clientY >= 60) {
					// 取消发送
					//console.log('松开手指取消发送');
					this.voiceTips = '松开手指取消发送'
				} else {
					// 继续发送
					//console.log('手指上滑 取消发送');
					this.voiceTips = '手指上滑取消发送'
				}
			},
			// 键盘确定输入内容
			confirmKey() {
				console.log(this.keyText)
				this.chattingData.push({
					type: 0, //0问。1答
					head: this.userInfo.avatar,
					name: this.userInfo.first_name,
					content: this.keyText,
					accessid: 0,
					url: ''
				})
				this.scrollTop = 20000
				this.getAiChat(this.keyText)
				this.isVoice = 1
				
				this.liveVideos = this.bgLiveVideos
				this.liveVideoIndex = 0
				this.liveWordIndex = null
				this.isWordsPlay = false
				
				this.keyText = ''
			},
			blurKey() {
				this.focusKey = false;
			},
			//语音播放完成之后恢复原始默认视频
			endSimulateVideo(){
				if(this.simulateLiveVideos.length > 0){
					this.liveVideos = this.bgLiveVideos
					this.liveVideoIndex = 0
				}
			},
			startSimulateVideo(){
				if(this.simulateLiveVideos.length > 0){
					this.liveVideos = this.simulateLiveVideos
					this.liveVideoIndex = 0
				}
			},
			// 弹出键盘之前判断是否已登录
			showKeyboard() {
				if(!this.isLogin){
					uni.reLaunch({
						url: "/pages/login/login?liveId="+ this.liveId
					})
					return
				}
				this.focusKey = true;
				//this.muted = true
			},
			// 语音切换
			clickIsVoice(index){
				if(!this.isLogin && index){
					uni.reLaunch({
						url: "/pages/login/login?liveId="+ this.liveId
					})
					return
				}
				this.isVoice = index
				if(this.isVoice == 1)
				{
					this.liveVideos = this.bgLiveVideos
					this.liveVideoIndex = 0
					this.liveWordIndex = null
					this.isWordsPlay = false
				}
				else if(this.isVoice == 0){
					innerAudioContext.stop()
				}
			},
			//进入到个人中心
			clickGoToMy(){
				if(!this.isLogin){
					uni.reLaunch({
						url: "/pages/login/login?liveId="+ this.liveId
					})
					return
				}
				else{
					uni.navigateTo({
						url: "/pages/my/my"
					})
				}
			},
			// 点击关注
			clickIsFocus(){
				if(!this.isLogin){
					uni.reLaunch({
						url: "/pages/login/login?liveId="+ this.liveId
					})
					return
				}
				this.isFocus = !this.isFocus
			},
			openPopup() {
				// console.log('open');
			},
			closePopup() {
				this.showPopup = false
				// console.log('close');
			},
			// 键盘高度
			keyboardheightchange(event){
				console.log('键盘高度', event.detail);
				this.keyboardInfo = event.detail
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upglide_tip {
		position: absolute;
		left: 50%;
		top: -200rpx;
		z-index: 99;
		width: 240rpx;
		height: 150rpx;
		margin-left: -120rpx;
		box-sizing: border-box;
		background: url('../../static/img/bg_7.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 14rpx;

		.ico {
			display: block;
			width: 36rpx;
			margin-top: 20rpx;
		}

		text {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 30rpx;
			color: #3D3D3D;
		}
	}

	.sounding {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		z-index: 99;

		.bg_img {
			display: block;
			width: 100%;
		}

		.sounding_item {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.text {
				font-size: 26rpx;
				font-weight: 500;
				line-height: 30rpx;
				padding-bottom: 35rpx;
			}

			.name {
				font-size: 20rpx;
				font-weight: 500;
				line-height: 30rpx;
				margin-top: 12rpx;
			}
		}

	}

	.keyboard {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
		background: #000;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all 0.25;
		.ico {
			flex-shrink: 0;
		}

		.key_input {
			width: 100%;
			height: 56rpx;
			border-radius: 10rpx;
			background: #1F1F1F;
			box-sizing: border-box;
			padding: 0 20rpx;
			font-size: 26rpx;
			margin: 20rpx 15rpx;
		}
	}
	
	.text-box{
		position: fixed;
		left: 40rpx;
		bottom: 405rpx;
		z-index: 9;
		min-height: 160rpx;
		max-height: 446rpx;
		border-radius: 20rpx;
		padding-right: 40rpx;
		text-align: justify;
		align-items: center;
		overflow: hidden;
		
	}
	
	.welcome_box{
		min-height: 70rpx;
		min-width: 20rpx;
		.welcome_ques {
			min-height: 70rpx;
			border-radius: 35rpx;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 53%, rgba(0, 0, 0, 0) 100%);
			align-items: center;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 44rpx;
			text-align: justify;
			color: #fff;
			padding: 15rpx 25rpx;
			box-sizing: border-box;
		
			text {
				color: #AFAFAF;
				padding-right: 10rpx;
			}
		}
	}
	
	.store_item{
		margin-top: 20rpx;
		min-height: 70rpx;
		min-width: 20rpx;
		.store_ques {
			min-height: 70rpx;
			border-radius: 35rpx;
			background: rgba(0, 0, 0, 0.5);
			align-items: center;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 44rpx;
			text-align: justify;
			color: #fff;
			padding: 15rpx 25rpx;
			box-sizing: border-box;
		
			text {
				color: #AFAFAF;
				padding-right: 10rpx;
			}
		}
	}
	
	.subtitle_ques{
		margin-top: 20rpx;
		min-height: 70rpx;
		max-height: 156rpx;
		border-radius: 20rpx;
		background: rgba(0, 0, 0, 0.4);
		font-size: 26rpx;
		font-weight: 500;
		line-height: 44rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		color: #fff;
		padding: 15rpx 25rpx;
		box-sizing: border-box;
		
		text {
			color: #AFAFAF;
			padding-right: 10rpx;
		}
	}

	.more_scene {
		width: 680rpx;
		height: 100vh;
		overflow-y: auto;
		.search {
			display: flex;
			align-items: center;
			width: 460rpx;
			height: 70rpx;
			border-radius: 35px;
			background: #1F1F1F;
			margin: 0 0 0 30rpx;
			padding: 0 10rpx 0 25rpx;
			box-sizing: border-box;

			.ico_ss {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			.input_ss {
				width: 100%;
				color: #fff;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 32rpx;
			}

			.btn {
				flex-shrink: 0;
				height: 54rpx;
				border-radius: 30rpx;
				background: #F9BE01;
				font-size: 22rpx;
				font-weight: 500;
				line-height: 54rpx;
				text-align: center;
				color: #292D32;
			}
		}

		.title {
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #FFFFFF;
			padding: 40rpx 30rpx 0;
		}

		.list {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding-right: 30rpx;
			padding-bottom: 80rpx;
			.item {
				width: 186rpx;
				position: relative;
				margin-top: 30rpx;
				margin-left: 30rpx;
				background: #1F1F1F;
				border-radius: 10rpx;

				.info {
					padding: 10rpx 15rpx;

					.name {
						font-size: 22rpx;
						font-weight: normal;
						line-height: 32rpx;
						text-align: justify;
						color: #FFFFFF;
						height: 32rpx;
						overflow: hidden;
					}

					.tag {
						font-size: 18rpx;
						font-weight: normal;
						line-height: 26rpx;
						text-align: justify;
						color: #999999;
						height: 26rpx;
						overflow: hidden;
					}
				}

				.lock {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					z-index: 9;
					display: flex;
					align-items: center;
					justify-content: center;

					.ico_8 {
						width: 36rpx;
					}
				}

				.ph {
					display: block;
					width: 100%;
					height: 320rpx;
					border-radius: 10rpx 10rpx 0 0;
				}

			}
		}
	}

	.chatting {
		position: fixed;
		left: 0;
		top: 200rpx;
		right: 0;
		width: 670rpx;
		height: 560rpx;
		margin: 0 auto;
		border: 1px solid #F9BE01;
		border-radius: 30rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.5);
		background-size: 100% auto;
		z-index: 9999;
		overflow: hidden;
		.scroll-Y{
			height: 560rpx;
		}
		.bg_img {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: -1;
		}

		.item {
			display: flex;
			padding: 15rpx 0;
			align-items: self-start;
			justify-content: space-between;

			&.row_reverse {
				flex-direction: row-reverse;

				.text-right {
					text-align: right;
					padding-right: 15rpx;
					padding-left: 50rpx;
				}
			}

			.ph {
				flex-shrink: 0;
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
			}

			.text-left {
				width: 100%;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 44rpx;
				text-align: justify;
				color: #cecaca;
				padding: 5rpx 0;
				padding-left: 15rpx;
				padding-right: 70rpx;
				text {
					color: #AFAFAF;
				}
			}
			
			.text-right {
				width: 100%;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 44rpx;
				text-align: justify;
				color: #FFFFFF;
				padding: 5rpx 0;
				padding-left: 15rpx;
				padding-right: 70rpx;
				text {
					color: #AFAFAF;
				}
			}
		}
	}

	.voice {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx 60rpx;

		.btn_big {
			width: 100%;
			height: 90rpx;
			border-radius: 40px;
			background: rgba(0, 0, 0, 0.6);
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				font-size: 26rpx;
				font-weight: 500;
				line-height: 30rpx;
				color: #FFFFFF;
				text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.3);
				padding-left: 8rpx;
			}

			&.hover {
				background: rgba(249, 190, 1, 0.4);
			}
		}
		.btn-left {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
		}
		
		.btn-right {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
		}
		.btn-top-right{
		    position: fixed;
		    top: 200rpx;
		    width: 60rpx;
		    right: 40rpx;
		    height: 60rpx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			align-items: center;
			display: flex;
			justify-content: center;
		}

		.ico_13 {
			width: 46rpx;
			height: 46rpx;
		}

		.ico_14 {
			width: 40rpx;
			height: 40rpx;
		}

		.ico_15 {
			width: 40rpx;
			height: 40rpx;
		}
		.ico_vioce {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.intellect {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 100rpx;
		//background: url('../../static/img/bg_1.png') no-repeat center top;
		background-size: 100% auto;
		height: 300rpx;

		.list {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			align-content: flex-start;
			flex-wrap: wrap;
			padding: 10rpx 15rpx;
			height: 200rpx;
			overflow-y: auto;
			.item {
				line-height: 56rpx;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.6);
				box-sizing: border-box;
				color: #fff;
				font-size: 24rpx;
				font-weight: bold;
				padding: 5rpx 25rpx;
				margin: 10rpx 10rpx;

				&.hover {
					background: rgba(249, 190, 1, 0.3);
					text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
				}
			}
			.ico_lock{
				margin-left: 10rpx;
				width: 24rpx;
				height: 24rpx;
				margin-bottom: -4rpx;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ico_3 {
				width: 46rpx;
				height: 20rpx;
			}

			.ico_4 {
				width: 36rpx;
				height: 36rpx;
			}

			.ico_5 {
				width: 34rpx;
				height: 36rpx;
			}

			.name {
				width: 270rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-right: 40rpx;
				height: 68rpx;
				margin-top: 10rpx;

				.text {
					display: block;
					padding-left: 20rpx;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 48rpx;
					text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2334);
					font-weight: bold;
				}
			}

			.btn {
				width: 167rpx;
				height: 68rpx;
				border-radius: 35rpx;
				background: rgba(0, 0, 0, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					display: block;
					color: #fff;
					padding-left: 10rpx;
					font-size: 28rpx;
					line-height: 30rpx;
				}
			}
		}
	}

	.home_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 0 230rpx 0 40rpx;

		.header_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			border-radius: 35rpx;
			background: rgba(0, 0, 0, 0.3);
			padding: 0 8rpx;
			margin-right: auto;

			.ph {
				flex-shrink: 0;
				display: block;
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
			}

			.name {
				color: #fff;
				font-size: 26rpx;
				line-height: 30rpx;
				padding: 0 10rpx;
				white-space: nowrap; /* 确保文本在一行内显示 */
				overflow: hidden; /* 隐藏溢出的内容 */
				text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
			}

			.btn {
				flex-shrink: 0;
				width: 78rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				border-radius: 30rpx;
				background: #F9BE01;
				font-size: 22rpx;

				&.hover {
					width: 100rpx;
					color: #fff;
					background: #484848;
				}
			}
		}

		.header_more {
			flex-shrink: 0;
			margin: 0 20rpx;
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			.name {
				color: #fff;
				font-size: 26rpx;
				line-height: 36rpx;
				margin-left: 10rpx;
			}
		}

		.header_my {
			flex-shrink: 0;
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.ico_1 {
			display: block;
			width: 36rpx;
			height: 36rpx;
		}

		.ico_2 {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.video_ph{
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 1;
		left:0;
		top:0;
		right: 0;
		bottom: 0;
		.img{
			display: block;
			width: 100%;
			height: 100vh;
			object-fit: cover;
		}
	}
	.home_video {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		
		.video_item{
			position: absolute;
			left:0;
			top:0;
			right:0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}
		.cover_ph {
			display: block;
			width: 100%;
			height: 100vh;
		}
	}

	/* 语音音阶------------- */
	.prompt-loader {
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.em {
			flex-shrink: 0;
			display: block;
			background: #3D3D3D;
			width: 4rpx;
			height: 10rpx;
			margin: 2rpx;
			border-radius: 2rpx;
			animation: load 1.5s infinite ease-in-out;

			&:nth-child(1) {
				animation-delay: 1.2s;
			}

			&:nth-child(2) {
				animation-delay: 0.9s;
			}

			&:nth-child(3) {
				animation-delay: 0.6s;
			}

			&:nth-child(4) {
				animation-delay: 0.3s;
			}

			&:nth-child(5) {
				animation-delay: 0.6s;
			}

			&:nth-child(6) {
				animation-delay: 0.9s;
			}

			&:nth-child(7) {
				animation-delay: 1.2s;
			}
		}
	}


	@keyframes load {
		0% {
			height: 10rpx;
		}

		50% {
			height: 30rpx;
		}

		100% {
			height: 10rpx;
		}
	}
	
	.three-dots {
	  --size: 20px;
	  display: inline-block;
	  font-size: var(--size);
	  height: var(--size);
	  line-height: var(--size);
	  overflow: hidden;
	  vertical-align: bottom;
	}

	.three-dots::after {
	  display: inline-block;
	  white-space: pre;
	  content: '\A.\A..\A...';
	  animation: loop 2s steps(4) infinite;
	}

	@keyframes loop {
	  to {
		transform: translateY(calc(0px - var(--size) * 4));
	  }
	}
	
	.expend{
		width: 624rpx;
		text-align: center;
		padding: 20rpx;
		.title{
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			padding:40rpx 0 30rpx;
		}
		.text{
			color: #A1A1A1;
			font-size: 24rpx;
			line-height: 36rpx;
		}
		.num{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 20rpx;
			.ico{
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;
				margin-right: 10rpx;
			}
			text{
				display: block;
				font-size: 80rpx;
				color: #FFFFFF;
				line-height: 100rpx;
			}
		}
		
		.btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			padding: 5rpx;
			.btn_item{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 100rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #000;
				margin-bottom: 20rpx;
				&.hover{
					background-color: #F9BE01;
				}
			}
		}
	}
</style>